@extends('layouts.header')
@section('title','智慧实验室')
@section('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.0.2/font/qweather-icons.css">
@endsection
@section('style')
    body{
    height:100%;
    overflow:hidden;
    background-color:#000;
    background: url('http://z.gqjjc03.vip/admin/static/myfolder/img/zks/back.png') no-repeat;
    background-size:100% 100%;
    color:#fff;
    font-size:100%;
    line-height:2;
    }
    .bg-dark{
    background-color:#fff;
    background: url('http://z.gqjjc03.vip/admin/static/myfolder/img/zks/border1.png') no-repeat;
    background-size:100% 100%;
    }
    .bg-mid-dark{
    background-color:#fff;
    background: url('http://z.gqjjc03.vip/admin/static/myfolder/img/zks/border2.png') no-repeat;
    background-size:100% 100%;
    }

    table > thead > tr > th  {
    font-size:110%;
    color: rgb(17, 208, 201);
    font-weight: bold;
    letter-spacing:2px;
    }
    table > tbody > tr {
    background-color: rgb(1, 75, 132);
    }

    .cell-title{
    letter-spacing:3px;
    color: rgb(17, 208, 201);
    }
@endsection
@section('content')
    {{--左边--}}
    <div class="page-container col-lg-3" style="height: 100%;">
        <div style="width: 90%;height: 100%;">
            <div class="row mt-30" style="height: 30%;">
                <div class="bg-dark mt-10" style="height: 100%;">
                    <h3 class="text-c mr-20 cell-title">天气</h3>
                    <h2 class="inline c-orange ml-10 text-c">
                        {{date('m月d日')}} &nbsp; {{"星期".["日","一","二","三","四","五","六"][date("w")]}} <span id="weather-text"></span>
                    </h2>
                    <div class="page-container ml-10" style="height: 100%;">
                        <img src="http://z.gqjjc03.vip/admin/static/myfolder/img/weather/temp.png" alt="温度" title="温度">
                        <span id="weather-temp" style="font-size: 110%;"></span>
                        <img src="http://z.gqjjc03.vip/admin/static/myfolder/img/weather/hum.png" alt="湿度" title="湿度">
                        <span id="weather-hum" style="font-size: 110%;"></span>
                        <img src="http://z.gqjjc03.vip/admin/static/myfolder/img/weather/pres.png" alt="大气压" title="大气压">
                        <span id="weather-pres" style="font-size: 110%;"></span>
                        <br>
                        <span class="ml-20" style="font-size: 110%;">风：<span id="weather-wind"></span></span>
                    </div>
                </div>
            </div>
            <div class="row" style="height: 30%;">
                <div class="bg-dark mt-10 text-c" style="height: 100%;">
                    <h3 class="mr-20 cell-title">管理员</h3>
                    <div class="ml-10">
                        @foreach($data['users'] as $k => $item)
                            <div class="col-xs-3">
                                <span>{{$item->realname ?: $item->username}}</span>
                                @if($item->chizheng)
                                    <img src="http://z.gqjjc03.vip/admin/static/myfolder/img/zks/cert.png">
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="row" style="height: 30%;">
                <div class="bg-dark mt-10 text-c" style="height: 100%;">
                    <h3 class="mr-20 cell-title">客户列表</h3>
                    <div style="height: 60%;margin:0 8%;">
                        <table style="border-collapse:separate; border-spacing:0 10px;">
                            <thead>
                            <tr>
                                <th class="text-c col-xs-2">序号</th>
                                <th class="text-c col-xs-7">送检单位</th>
                                <th class="text-c col-xs-3">联系人</th>
                            </tr>
                            </thead>
                            <tbody id="tb_cli">
                            @foreach($data['client'] as $k => $item)
                                <tr class=" @if($k > 2) hidden @else tr_show @endif" id="cli_{{$k}}">
                                    <td class="text-c c-white col-xs-2">{{$k+1}}</td>
                                    <td class="text-c c-white col-xs-7">{{mb_strlen($item->name) > 13 ? mb_substr($item->name,0,13).'...' : $item->name}}</td>
                                    <td class="text-c c-white col-xs-3">{{mb_strlen($item->contact) > 1 ? str_replace(mb_substr($item->contact,1,1),'*',$item->contact) : $item->contact}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--中间--}}
    <div class="page-container col-lg-6 text-c" style="height: 98%;">
        <h1 class="mt-30 cell-title">智 慧 实 验 室</h1>
        <div class="bg-mid-dark" style="height:86%;overflow: hidden;margin-top: 1%;">
            <div style="height: 90%;margin:1% 2%;">
                <table style="border-collapse:separate; border-spacing:0px 10px;">
                    <thead>
                    <tr>
                        <th class="text-c ">序号</th>
                        <th class="text-c ">批次号</th>
                        <th class="text-c ">送检单位</th>
                        <th class="text-c ">受理人</th>
                        <th class="text-c ">状 态</th>
                    </tr>
                    </thead>
                    <tbody id="tb_batch" style="margin-bottom: 1%;">
                    @foreach($data['contract'] as $k=>$item)
                        <tr class="@if($k > 15) hidden @else tr_show @endif " id="batch_{{$k}}">
                            <td class="c-white">{{$k+1}}</td>
                            <td class="c-white">{{$item->batchNum}}</td>
                            <td class="c-white">{{$item->client_name}}</td>
                            <td class="c-white">{{$item->creator}}</td>
                            <td class="c-white">
                                @switch($item->status)
                                    @case(0)
                                    受理中
                                    @break
                                    @case(1)
                                    待检
                                    @break
                                    @case(5)
                                    试验中
                                    @break
                                    @case(8)
                                    待审核
                                    @break
                                    @case(11)
                                    待批准
                                    @break
                                    @case(13)
                                    批准驳回
                                    @break
                                    @case(14)
                                    批准完成
                                    @break
                                    @case(17)
                                    待退样
                                    @break
                                    @default
                                    '未知状态'
                                @endswitch
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            <strong class="cell-title" style="font-size: 130%;">在受理批次</strong>
        </div>
    </div>
    {{--右边--}}
    <div class="page-container col-lg-3" style="height: 100%;">
        <div style="width: 90%;height: 100%;" class="r">
            <div class="row mt-30" style="height: 30%;">
                <div class="bg-dark mt-10" style="height: 100%;">
                    <h3 class="text-c mr-20 cell-title">到期预警</h3>
                    <div style="height: 60%;margin:0 8%;">
                        <table style="border-collapse:separate; border-spacing:0px 10px;">
                            <thead>
                            <tr>
                                <th class="text-c  col-xs-2">序号</th>
                                <th class="text-c  col-xs-8">送检单位</th>
                                <th class="text-c  col-xs-2">数量</th>
                            </tr>
                            </thead>
                            <tbody id="tb_exp">
                            @foreach($data['expire'] as $k => $item)
                                <tr class=" @if($k > 2) hidden @else tr_show @endif" id="exp_{{$k}}">
                                    <td class="text-c c-white col-xs-2">{{$k+1}}</td>
                                    <td class="text-c c-white col-xs-8">{{mb_strlen($item->client_name) > 15 ? mb_substr($item->client_name,0,15).'...' : $item->client_name }}</td>
                                    <td class="text-c c-white col-xs-2">{{$item->num}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row" style="height: 30%;">
                <div class="bg-dark mt-10 text-c" style="height: 100%;">
                    <h3 class="mr-20 cell-title">检测设备</h3>
                    <div style="height: 60%;margin:0 8%;">
                        <table style="border-collapse:separate; border-spacing:0px 10px;">
                            <thead>
                            <tr>
                                <th class="text-c  col-xs-2">序号</th>
                                <th class="text-c  col-xs-8">设备名称</th>
                                <th class="text-c  col-xs-2">状态</th>
                            </tr>
                            </thead>
                            <tbody id="tb_sta">
                            @foreach($data['stations'] as $k => $item)
                                <tr class=" @if($k > 2) hidden @else tr_show @endif" id="sta_{{$k}}">
                                    <td class="text-c c-white col-xs-2">{{$k+1}}</td>
                                    <td class="text-c c-white col-xs-8">{{mb_strlen($item->name) > 15 ? mb_substr($item->name,0,15).'...' : $item->name }}</td>
                                    <td class="text-c c-white col-xs-2">
                                        @switch($item->status)
                                            @case(1)
                                            在用
                                            @break
                                            @case(2)
                                            准用
                                            @break
                                            @case(3)
                                            停用
                                            @break
                                            @case(4)
                                            淘汰
                                            @break
                                            @default
                                            '未知状态'
                                        @endswitch
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            <div class="row" style="height: 30%;">
                <div class="bg-dark mt-10 text-c" style="height: 100%;">
                    <h3 class="mr-20 cell-title">今日主检</h3>
                    <div style="height: 60%;margin:0 8%;">
                        <table style="border-collapse:separate; border-spacing:0px 10px;">
                            <thead>
                            <tr>
                                <th class="text-c  col-xs-2">序号</th>
                                <th class="text-c  col-xs-5">姓名</th>
                                <th class="text-c  col-xs-5">项目完成量</th>
                            </tr>
                            </thead>
                            <tbody id="tb_test">
                            @foreach($data['tester'] as $k => $item)
                                <tr class=" @if($k > 2) hidden @else tr_show @endif" id="test_{{$k}}">
                                    <td class="text-c c-white col-xs-2">{{$k+1}}</td>
                                    <td class="text-c c-white col-xs-5">{{mb_strlen($item->realname) > 15 ? mb_substr($item->realname,0,15).'...' : $item->realname }}</td>
                                    <td class="text-c c-white col-xs-5">{{$item->test_count}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var batCount = parseInt('{{count($data['contract'])}}'),
            expCount = parseInt('{{count($data['expire'])}}'),
            cliCount = parseInt('{{count($data['client'])}}'),
            staCount = parseInt('{{count($data['stations'])}}'),
            lastId = lastExpId = lastCliId = lastStaId = -1,
            trHeight = $(window).height() > 1000 ? '35px' : '30px';  //适应高度;
        $(function () {
            let addr = JSON.parse(@json($data['addr']));
            // console.log(addr)
            if (addr.status !== 0) {
                layer.msg('地址获取失败');
                return false;
            }

            $('#weather-area').text(addr.content.address);
            ajax('get', 'https://devapi.qweather.com/v7/weather/now?key=b53bf235be9a425697374c3b4bbc2f67&location=' + addr.content.point.x + ',' + addr.content.point.y, '', getWeather, 0);

            //循环播放tbody
            tabXun();

            //适配全屏
            reFullSize();
            $(window).on("resize", function () {
                reFullSize()
            });

            //10分钟刷新一次页面
            setTimeout(function () {
                setInterval(function () {
                    window.location.reload();
                }, 600000);   //每隔段时间切换显示批次
            }, 600000)
        })

        function reFullSize() {
            $(window).width() < 1280 ? ($('body > div').addClass('hidden') && layer.msg('不支持1280以下像素的宽度适配')) : $('body > div').removeClass('hidden');   //适应宽度
            $('tr').css('height', trHeight);
        }

        /*思路
           * 如果计算得到的最后一个id值比总数量大：
           *   取余
           *   得到同样ID的内容（并将之前的内容删除），
           *   添加到tbody中
           * 将第一个值隐藏
           * 最后一行内容显示出来
           * */
        function tabXun() {
            if (batCount > 16) {
                setInterval(function () {
                    lastId += 1;
                    xun(lastId, 16, batCount, '#tb_batch', 'batch_');
                }, 3000);   //每隔段时间切换显示批次
            }
            if (expCount > 3) {
                setInterval(function () {
                    lastExpId += 1;
                    xun(lastExpId, 3, expCount, '#tb_exp', 'exp_');
                }, 3000);   //每隔段时间切换显示过期工器具
            }
            if (cliCount > 3) {
                setInterval(function () {
                    lastCliId += 1;
                    xun(lastCliId, 3, cliCount, '#tb_cli', 'cli_');
                }, 3000);   //每隔段时间切换显示客户信息
            }
            if (staCount > 3) {
                setInterval(function () {
                    lastStaId += 1;
                    xun(lastStaId, 3, staCount, '#tb_sta', 'sta_');
                }, 3000);   //每隔段时间切换显示客户信息
            }
        }

        function xun(lasId, count, total, tbId, trSub) {
            let nextId = lasId + count;
            if (nextId > total || nextId === total) {
                let nId = nextId % total;
                let tdStr = $('#' + trSub + nId).html();
                if (tdStr !== '') {
                    $('.' + trSub + nId).remove();
                    $(tbId).append('<tr class="tr_show ' + trSub + nId + '" style="height: ' + trHeight + '">' + tdStr + '</tr>');  //增加最后一行
                    $(tbId + ' .tr_show:first').addClass('hidden').removeClass('tr_show');     //去掉第一行
                }
            } else {
                $('#' + trSub + nextId).removeClass('hidden').addClass('tr_show'); //最后一行的多显示一行
                $(tbId + ' .tr_show:first').addClass('hidden').removeClass('tr_show');     //去掉第一行
            }
        }

        function getWeather(res) {
            if (res.code !== '200') {
                layer.msg('获取天气失败！');
                return false;
            }
            let now = res.now;
            // console.log(res)
            $('#weather-temp').html(now.temp + '℃');
            $('#weather-hum').text(now.humidity + '%');
            $('#weather-pres').text(now.pressure / 10 + 'kPa');
            $('#weather-wind').append(now.windScale + '级 ' + now.windSpeed + 'km/h ' + now.windDir + ' ' + now.wind360 + '度');
            $('#weather-text').html('<i class="qi-' + now.icon + '" title="' + now.text + '"></i>');
            $('#weather-time').text('观测时间：' + now.obsTime.substr(0, 10) + ' ' + now.obsTime.substr(11, 5));
        }

    </script>
@endsection